import React, { useEffect, useState } from 'react'

export default function ClickCounter2() {
  let [num,setNum] = useState(0);
  let [age,setAge] = useState(18);

  //useEffect 钩子函数,只能用在顶层位置
  
  /******生命周期方法1******/
  // useEffect(()=>{
  //   console.log("生命周期方法1 - 组件完成加载 或 任意状态变量发生变更触发,看到新数据",num,age)
  // });

  /******生命周期方法2******/
  // useEffect(()=>{
  //   console.log("生命周期方法2 - 组件加载完成 或 指定的状态变量发生变更触发,看到新数据")
  // },[age])//[]称之为副作用方法的"依赖列表"

  /******生命周期方法3******/
  // useEffect(()=>{
  //   console.log("生命周期方法3 - 组件加载完成时触发,但,任何状态变量的变化都不触发")
  // },[])//"依赖列表"为空,表示该副作用方法不做用于任何状态变量

  /******生命周期方法4******/
  // useEffect(()=>{
  //   return ()=>{
  //     console.log("生命周期方法4 - 任意状态变量发生变更 或 组件被卸载前触发,看到旧数据 ",num,age)
  //   }
  // })
  
  /******生命周期方法5******/
  // useEffect(()=>{
  //   return ()=>{
  //     console.log("生命周期方法5 - 指定状态变量发生变更 或 组件被卸载前触发,看到旧数据 ",age)
  //   }
  // },[age])

  /******生命周期方法6******/
  useEffect(()=>{
    return ()=>{
      console.log("生命周期方法6 - 任意状态变量的变更都不触发,只在组件被卸载时触发执行")
    }
  },[])

  return (
    <div style={{margin:'10px',
      padding:'20px',
      backgroundColor:'#cfc'}}>
      <h3>ClickCounter2 - 子组件</h3>
      <button onClick={()=>{setNum(num+1)}}>
        当前数字:{num}
      </button>
      <button onClick={()=>{setAge(age+1)}}>
        当前年龄:{age}
      </button>
    </div>
  )
}
